import React, { Component } from 'react';
import {
    View,
    Text,
    NativeModules,
    DeviceEventEmitter,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    PermissionsAndroid,
    ScrollView,
    PanResponder,
    Animated,
    TextInput,
    Image
} from 'react-native';
import { getPixel } from '../common/utils'
import ImagePicker from 'react-native-image-picker'
import ImageCropper from 'react-native-image-crop-picker'

import { observer, inject } from 'mobx-react';

const ocr = NativeModules.OcrModule;
const options = {
    title: 'Select Avatar',
    storageOptions: {
        skipBackup: true,
        path: 'images',
    },
    rotation: 90,
    noData: true,
};

const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height

@inject('store')
@observer
export default class App extends Component {
    pan7 = PanResponder.create({
        onMoveShouldSetPanResponder: (evt, gestureState) => {
            if (Math.abs(gestureState.dx) >= 1 && Math.abs(gestureState.dy) <= 3) {
                this._input01.blur();
                this._input02.blur();
                this._input11.blur();
                this._input12.blur();
                this._input21.blur();
                this._input22.blur();
                return true
            }
            return false
        },
        onPanResponderTerminate: (evt, gestureState) => {
            // 不切换
            // 还原
            Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                }
            ).start();
            Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 300,              // 让动画持续一段时间
                    useNativeDriver: true
                }
            ).start();
            if (this.state.whichBox == 1) {
                this._moveBox.setNativeProps({
                    style: { height: this.state.firstHeight }
                })
            } else if (this.state.whichBox == 2) {
                this._moveBox.setNativeProps({
                    style: { height: this.state.secHeight }
                })
            } else {
                this._moveBox.setNativeProps({
                    style: { height: this.state.zeroHeight }
                })
            }
        },
        onPanResponderMove: (evt, gestureState) => {
            let temp1 = 0
            let temp2 = 0
            if (gestureState.dx > 0) {
                temp1 = gestureState.dx >= 100 ? 100 : gestureState.dx
            } else {
                temp2 = gestureState.dx <= -100 ? -100 : gestureState.dx
            }
            // 1板子在中间
            if (this.state.whichBox == 1) {
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    // this._moveBox.setNativeProps({
                    //     style: { height: temp2 / 100 * (this.state.firstHeight - this.state.secHeight) + this.state.firstHeight }
                    // })
                } else if (gestureState.dx > 0) {
                    // 右滑
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    // this._moveBox.setNativeProps({
                    //     style: { height: -temp1 / 100 * (this.state.firstHeight - this.state.zeroHeight) + this.state.firstHeight }
                    // })
                }
            } else if (this.state.whichBox == 2) {
                // 第二个板子在中间
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    // this._moveBox.setNativeProps({
                    //     style: { height: temp2 / 100 * (this.state.secHeight - this.state.zeroHeight) + this.state.secHeight }
                    // })
                } else if (gestureState.dx > 0) {
                    // 右滑
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    // this._moveBox.setNativeProps({
                    //     style: { height: -temp1 / 100 * (this.state.secHeight - this.state.firstHeight) + this.state.secHeight }
                    // })
                }
            } else {
                // 第0个板子在中间
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    // this._moveBox.setNativeProps({
                    //     style: { height: temp2 / 100 * (this.state.zeroHeight - this.state.firstHeight) + this.state.zeroHeight }
                    // })
                } else if (gestureState.dx > 0) {
                    // 右滑
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    // this._moveBox.setNativeProps({
                    //     style: { height: -temp1 / 100 * (this.state.zeroHeight - this.state.secHeight) + this.state.zeroHeight }
                    // })
                }
            }
        },
        onPanResponderRelease: (evt, gestureState) => {
            if (gestureState.dx >= 100 || gestureState.dx <= -100) {
                // 确认切换
                if (gestureState.dx < 0) {
                    // 往左滑
                    if (this.state.whichBox == 1) {
                        // 第一个板子 
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值 
                                    {
                                        toValue: 0,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                if (this.state.isRight && this.state.index === this.state.detailPlotNumber - 2) {

                                    this.state.detailPlots.splice(-1, 0, { core: '', step: '' })
                                    this.setState({ zeroIndex: (this.state.index + 2) % (this.state.detailPlotNumber + 1), whichBox: 2, index: (this.state.index + 1) % (this.state.detailPlotNumber + 1), detailPlots: [...this.state.detailPlots], detailPlotNumber: this.state.detailPlotNumber + 1, isRight: true })

                                } else {
                                    this.setState({ zeroIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index + 1) % this.state.detailPlotNumber, isRight: true })

                                }
                                this._detailPlot0.setNativeProps({
                                    style: { left: this.state.width }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: -this.state.width }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: 0 }
                                })
                            });

                        });

                        // this._moveBox.setNativeProps({
                        //     style: { height: this.state.secHeight }
                        // })

                    } else if (this.state.whichBox == 2) {
                        // 第二个板子
                        // this._moveBox.setNativeProps({
                        //     style: { height: this.state.zeroHeight }
                        // })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: 0,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                if (this.state.isRight && this.state.index === this.state.detailPlotNumber - 2) {
                                    this.state.detailPlots.splice(-1, 0, { core: '', step: '' })
                                    this.setState({ firstIndex: (this.state.index + 2) % (this.state.detailPlotNumber + 1), whichBox: 0, index: (this.state.index + 1) % (this.state.detailPlotNumber + 1), detailPlots: [...this.state.detailPlots], detailPlotNumber: this.state.detailPlotNumber + 1, isRight: true })
                                } else {
                                    this.setState({ firstIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index + 1) % this.state.detailPlotNumber, isRight: true })

                                }
                                this._detailPlot0.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: this.state.width }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: -this.state.width }
                                })
                            });

                        });
                    } else {
                        // 第0个板子         
                        // this._moveBox.setNativeProps({
                        //     style: { height: this.state.firstHeight }
                        // })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                if (this.state.isRight && this.state.index === this.state.detailPlotNumber - 2) {

                                    this.state.detailPlots.splice(-1, 0, { core: '', step: '' })
                                    this.setState({ secIndex: (this.state.index + 2) % (this.state.detailPlotNumber + 1), whichBox: 1, index: (this.state.index + 1) % (this.state.detailPlotNumber + 1), detailPlots: [...this.state.detailPlots], detailPlotNumber: this.state.detailPlotNumber + 1, isRight: true })

                                } else {
                                    this.setState({ secIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index + 1) % this.state.detailPlotNumber, isRight: true })

                                }

                                this._detailPlot0.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                            });

                        });

                    }
                } else if (gestureState.dx > 0) {
                    // 往右滑
                    if (this.state.whichBox == 1) {
                        // 第一个板子
                        // this._moveBox.setNativeProps({
                        //     style: { height: this.state.zeroHeight }
                        // })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ secIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, isRight: false })
                                this._detailPlot0.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                            });
                        });


                    } else if (this.state.whichBox == 2) {
                        // 第二个板子
                        // this._moveBox.setNativeProps({
                        //     style: { height: this.state.firstHeight }
                        // })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ zeroIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, isRight: false })
                                this._detailPlot0.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                            });
                        });
                    } else {
                        // 第0个板子
                        // this._moveBox.setNativeProps({
                        //     style: { height: this.state.secHeight }
                        // })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ firstIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, isRight: false })
                                this._detailPlot0.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                            });
                        });
                    }
                }
            } else {
                // 不切换
                // 还原
                Animated.timing(                  // 随时间变化而执行动画
                    this.state.detailAnim,            // 动画中的变量值
                    {
                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                        duration: 0,              // 让动画持续一段时间
                        useNativeDriver: true
                    }
                ).start(() => {
                    Animated.timing(                  // 随时间变化而执行动画
                        this.state.detailAnim,            // 动画中的变量值
                        {
                            toValue: 0,                   // 透明度最终变为1，即完全不透明
                            duration: 300,              // 让动画持续一段时间
                            useNativeDriver: true
                        }
                    ).start();
                });

            }
        }
    })
    state = {
        question: '',
        answer: false,

        // 集数 从0开始
        index: 0,
        whichBox: 1,
        // 三个班子对应的高度
        zeroHeight: 0,
        firstHeight: 0,
        secHeight: 0,
        // 剧情板子对应的index
        zeroIndex: 2,
        firstIndex: 0,
        secIndex: 1,

        // 分集剧情组件
        width: Dimensions.get('window').width - 8,

        // 动画参数
        detailAnim: new Animated.Value(0),

        // 第一个剧情板子第一次设置moveBox高度
        isFirstRefresh: true,
        detailPlotNumber: 3,
        detailPlots: [
            { core: '', step: '' },
            { core: '', step: '' },
            { core: '', step: '' },
        ],
        focus: false,
        isRight: false,
        isWrite: false,
        firstOrSec: 1,
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.question !== nextState.question) {
            return true
        }
        if (this.state.answer !== nextState.answer) {
            return true
        }
        if (this.state.zeroIndex !== nextState.zeroIndex) {
            return true
        }
        if (this.state.firstIndex !== nextState.firstIndex) {
            return true
        }
        if (this.state.isWrite !== nextState.isWrite) {
            return true
        }
        if (this.state.secIndex !== nextState.secIndex) {
            return true
        }
        return false;
    }
    componentDidMount = () => {
        DeviceEventEmitter.addListener('recGeneralBasicAnswerTwo', result => {
            var res = JSON.parse(result.result)
            var question = ''
            res.words_result.forEach((item, index) => {
                question = question + item.words
            })
            if (this.state.firstOrSec === 1) {
                this.state.detailPlots[this.state.index].core = question
            } else {
                this.state.detailPlots[this.state.index].step = question
            }
            this.setState({ isWrite: !this.state.isWrite })
        })
    };

    AnswergetTextFromPhoto = async (index) => {
        this.setState({ firstOrSec: index })

        const grant = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
        );
        if (grant === PermissionsAndroid.RESULTS.GRANTED) {
            ImagePicker.launchCamera(options, (response) => {
                ImageCropper.openCropper({
                    path: response.uri,
                    width: screenWidth,
                    height: screenHeight,
                    hideBottomControls: true,
                    enableRotationGesture: false,
                    freeStyleCropEnabled: true
                }).then(image => {
                    ocr.recGeneralBasicAnswerTwo(image.path.substr(7))
                });
            })
        }
    }


    insertQuestion = () => {
        var arr = []
        this.state.detailPlots.forEach((item, index) => {
            if (item.core !== '' || item.step !== '') {
                arr.push(item)
            }
        })
        if (arr.length === 0) {
            alert('你还没写答案')
        } else {
            var url = `${this.props.store.ip}/insertAnswer`
            var config = {
                method: 'POST',
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: "questionId=" + this.props.question.id + "&contents=" + JSON.stringify(arr) + "&userId=" + this.props.store.account.userId + "&class=" + this.props.store.account.class + "&name=" + this.props.store.account.name + "&school=" + this.props.store.account.school
            }
            fetch(url, config).then((response) => response.json())
        }
    }

    render() {

        return (
            <View style={{ flex: 1, alignItems: 'center', paddingHorizontal: getPixel(8), flexDirection: 'column' }}>
                <ScrollView style={{ flex: 1, width: '100%' }} keyboardDismissMode='on-drag' showsVerticalScrollIndicator={false}>
                    <Text style={{ marginTop: getPixel(15), fontSize: 16, paddingHorizontal: getPixel(10), borderRadius: 6, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B' }}>{this.props.question.contents}</Text>

                    <TouchableOpacity onPress={() => {
                        this.setState({ answer: true })
                    }} style={{ width: '100%', marginVertical: getPixel(15) }} >
                        <Text style={{ paddingVertical: getPixel(15), fontSize: getPixel(16), textAlign: 'center', backgroundColor: 'skyblue', borderRadius: getPixel(10) }}>写答案</Text>
                    </TouchableOpacity>

                    {this.state.answer ?
                        <Animated.View key='detailSwiper' {...this.pan7.panHandlers} style={{ width: '100%' }}>
                            <Animated.View ref={ref => this._moveBox = ref} style={{ width: '100%', position: 'relative', height: getPixel(600) }}>

                                {/* 剧情第0个板子 */}
                                <Animated.View ref={ref => this._detailPlot0 = ref} style={{ borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: getPixel(10), alignItems: 'center', width: '100%', position: 'absolute', left: -this.state.width }}
                                // onLayout={() => {
                                //     let handle0 = findNodeHandle(this._detailPlot0);
                                //     UIManager.measure(handle0, (x, y, width, height, pageX, pageY) => {
                                // this.setState({ zeroHeight: height })
                                // if (this.state.photo) {
                                //     this._moveBox.setNativeProps({
                                //         style: { height: height }
                                //     })
                                //     this.setState({ photo: false })
                                // }
                                // })
                                // }}
                                >
                                    <View style={{ width: '100%', flexDirection: 'column', alignItems: 'center' }}>
                                        <Text style={{ fontSize: 17, lineHeight: 20 }}>第{this.state.zeroIndex + 1}步  </Text>
                                        <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%', }}>
                                            <TextInput
                                                ref={ref => this._input01 = ref}
                                                value={this.state.detailPlots[this.state.zeroIndex].core}

                                                multiline={true}
                                                placeholder='输入你的思路'
                                                style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(50), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                                                onChangeText={(text) => {
                                                    this.state.detailPlots[this.state.index].core = text
                                                    this.setState({ isWrite: !this.state.isWrite })
                                                }}
                                            />
                                            <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                                                this.AnswergetTextFromPhoto(1)
                                            }}>
                                                <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%' }}>

                                            <TextInput
                                                ref={ref => this._input02 = ref}
                                                value={this.state.detailPlots[this.state.zeroIndex].step}

                                                multiline={true}
                                                placeholder='输入你的答案'
                                                style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(100), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                                                onChangeText={(text) => {
                                                    this.state.detailPlots[this.state.index].step = text
                                                    this.setState({ isWrite: !this.state.isWrite })
                                                }}
                                            />
                                            <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                                                this.AnswergetTextFromPhoto(2)
                                            }}>
                                                <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                                            </TouchableOpacity>
                                        </View>

                                    </View>
                                </Animated.View>

                                {/* 剧情第一个板子 */}
                                <Animated.View ref={ref => this._detailPlot1 = ref} style={{ borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: getPixel(10), alignItems: 'center', width: '100%', position: 'absolute', left: 0 }}
                                // onLayout={() => {
                                //     let handle = findNodeHandle(this._detailPlot1);
                                //     UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {

                                //         if (this.state.isFirstRefresh) {
                                //             this._moveBox.setNativeProps({
                                //                 style: { height: height }
                                //             })
                                //             this._detailPlot1.setNativeProps({ style: { position: 'absolute' } })
                                //             this.setState({ isFirstRefresh: false, firstHeight: height })
                                //         } else {
                                //             if (this.state.photo) {
                                //                 this._moveBox.setNativeProps({
                                //                     style: { height: height }
                                //                 })
                                //                 this.setState({ photo: false })
                                //             }
                                //             this.setState({ firstHeight: height })
                                //         }
                                //     })
                                // }} 
                                >
                                    <View style={{ width: '100%', flexDirection: 'column', alignItems: 'center' }}>
                                        <Text style={{ fontSize: 17, lineHeight: 20 }}>第{this.state.firstIndex + 1}步  </Text>

                                        <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%', }}>

                                            <TextInput
                                                ref={ref => this._input11 = ref}
                                                value={this.state.detailPlots[this.state.firstIndex].core}
                                                multiline={true}
                                                placeholder='输入你的思路'
                                                style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(50), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                                                onChangeText={(text) => {
                                                    this.state.detailPlots[this.state.index].core = text
                                                    this.setState({ isWrite: !this.state.isWrite })
                                                }}
                                            />
                                            <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                                                this.AnswergetTextFromPhoto(1)
                                            }}>
                                                <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%', }}>

                                            <TextInput
                                                ref={ref => this._input12 = ref}
                                                value={this.state.detailPlots[this.state.firstIndex].step}

                                                multiline={true}
                                                placeholder='输入你的步骤'
                                                style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(100), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                                                onChangeText={(text) => {
                                                    this.state.detailPlots[this.state.index].step = text
                                                    this.setState({ isWrite: !this.state.isWrite })
                                                }}
                                            />
                                            <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                                                this.AnswergetTextFromPhoto(2)
                                            }}>
                                                <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </Animated.View>

                                {/* 剧情第二个板子 */}
                                <Animated.View ref={ref => this._detailPlot2 = ref} style={{ borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: getPixel(10), alignItems: 'center', width: '100%', position: 'absolute', left: this.state.width }}
                                // onLayout={() => {
                                //     let handle2 = findNodeHandle(this._detailPlot2);
                                //     UIManager.measure(handle2, (x, y, width, height, pageX, pageY) => {
                                //         this.setState({ secHeight: height })
                                //         if (this.state.photo) {
                                //             this._moveBox.setNativeProps({
                                //                 style: { height: height }
                                //             })
                                //             this.setState({ photo: false })

                                //         }
                                //     })
                                // }}
                                >
                                    <View style={{ width: '100%', flexDirection: 'column', alignItems: 'center' }}>
                                        <Text style={{ fontSize: 17, lineHeight: 20 }}>第{this.state.secIndex + 1}步  </Text>
                                        <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%' }}>

                                            <TextInput
                                                ref={ref => this._input21 = ref}
                                                value={this.state.detailPlots[this.state.secIndex].core}

                                                multiline={true}
                                                placeholder='输入你的思路'
                                                style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(50), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                                                onChangeText={(text) => {
                                                    this.state.detailPlots[this.state.index].core = text
                                                    this.setState({ isWrite: !this.state.isWrite })
                                                }}
                                            />
                                            <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                                                this.AnswergetTextFromPhoto(1)
                                            }}>
                                                <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%' }}>

                                            <TextInput
                                                ref={ref => this._input22 = ref}
                                                value={this.state.detailPlots[this.state.secIndex].step}

                                                multiline={true}
                                                placeholder='输入你的答案'
                                                style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(100), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                                                onChangeText={(text) => {
                                                    this.state.detailPlots[this.state.index].step = text
                                                    this.setState({ isWrite: !this.state.isWrite })
                                                }}
                                            />
                                            <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                                                this.AnswergetTextFromPhoto(2)
                                            }}>
                                                <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                                            </TouchableOpacity>
                                        </View>

                                    </View>
                                </Animated.View>
                            </Animated.View >

                        </Animated.View >
                        : null}
                </ScrollView>
                <TouchableOpacity onPress={() => {
                    this.insertQuestion()
                }} style={{ width: '100%' }} >
                    <Text style={{ paddingVertical: getPixel(15), fontSize: getPixel(16), textAlign: 'center', backgroundColor: '#a3ec93', borderRadius: getPixel(10) }}>发布问题</Text>
                </TouchableOpacity>
            </View >
        );
    }
}

const styles = StyleSheet.create({
    text: {
        marginLeft: 15,
        padding: 5,
        fontSize: 20,
    }
})
